<template>
    <el-dialog
        v-model="configCenterAddOrUpdateDialogVisible"
        title="添加配置"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="configCenterForm" :rules="configCenterRules" ref="configCenterFormRef">
                <el-form-item label="所属微服务" label-width="20%" prop="application">
                    <el-select v-model="configCenterForm.application" clearable placeholder="所属微服务" style="width: 100%">
                        <el-option :value="item.applicationName" :label="item.applicationName" v-for="item in applicationList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属环境" label-width="20%" prop="profile">
                    <el-input v-model="configCenterForm.profile" placeholder="所属环境" clearable />
                </el-form-item>
                <el-form-item label="键" label-width="20%" prop="key">
                    <el-input v-model="configCenterForm.key" placeholder="键" clearable />
                </el-form-item>
                <el-form-item label="值" label-width="20%" prop="value">
                    <el-input v-model="configCenterForm.value" placeholder="值" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {applicationInfoQuery} from "@/request/service";
import {ElNotification} from "element-plus";
import {addConfigInfoQuery, configInfoQuery, updateConfigInfoQuery} from "@/request/configCenter";

export default {
    name: "ServiceAddOrUpdateConfigDialog",
    props: ['configCenterForm'],
    data() {
        return {
            configCenterRules: {
                application: [{ required: true, message: '所属微服务不能为空', trigger: 'blur' }],
                profile: [{ required: true, message: '所属环境不能为空', trigger: 'blur' }],
                key: [{ required: true, message: '键不能为空', trigger: 'blur' }],
                value: [{ required: true, message: '值不能为空', trigger: 'blur' }]
            },
            applicationList: [],
            saveLoading: false
        }
    },
    methods: {
        cancelDialog() {
            this.$store.commit('changeConfigCenterAddOrUpdateDialogVisible', false);
        },
        submitDialog() {
            this.saveLoading = true
            let formEl = this.$refs['configCenterFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    if (this.configCenterForm.id !== '') {
                        // 修改
                        updateConfigInfoQuery(this.configCenterForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.$store.commit('changeConfigCenterAddOrUpdateDialogVisible', false);
                                configInfoQuery(this.configCenterSearchData).then(res => {
                                    this.$store.commit('changeConfigCenterDataList', res.data);
                                })
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    } else {
                        // 调用后端接口插入数据
                        addConfigInfoQuery(this.configCenterForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.$store.commit('changeConfigCenterAddOrUpdateDialogVisible', false);
                                configInfoQuery(this.configCenterSearchData).then(res => {
                                    this.$store.commit('changeConfigCenterDataList', res.data);
                                })
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    }
                } else {
                    return false
                }
            })
        }
    },
    computed: {
        configCenterAddOrUpdateDialogVisible() {
            return this.$store.state.configCenterAddOrUpdateDialogVisible;
        },
        configCenterSearchData() {
            return this.$store.state.configCenterSearchData;
        }
    },
    created() {
        applicationInfoQuery({}).then(res => {
            let global = {
                id: 0,
                applicationName: "GLOBAL"
            }
            res.data.unshift(global)
            this.applicationList = res.data
        })
    }
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>